import React, { FC, useState } from "react";
import { Input } from "@/ui/Input/Input";
import { Button } from "@/ui/Button/Button";
import { UserI } from "@/models/user";
import cls from "@/styles/feature/CreateUserForm.module.scss";
import { RoleSelector } from "@/components/CreateUser/RoleSelector/RoleSelector";
import { MainSpecSelector } from "@/components/CreateUser/MainSpecSelector/MainSpecSelector";
import { AdditionalSpecSelector } from "@/components/CreateUser/AdditionalSpecSelector/AdditionalSpecSelector";
import { EmploymentFractionSelector } from "@/components/CreateUser/EmploymentFractionSelector/EmploymentFractionSelector";

type Props = {
  user: Partial<UserI>;
  updateUser: (v: Partial<UserI>) => void;
  onSave: () => void;
  isEdit?: boolean;
  isProfile?: boolean;
};

const CreateUserForm = ({
  user,
  updateUser,
  onSave,
  isEdit,
  isProfile,
}: Props) => {
  return (
    <div className={cls.root}>
      <div className={cls.header}>Карточка сотрудника</div>
      <div className={cls.form}>
        <div className={cls.row}>
          <div className={cls.field}>
            <Input
              onChange={(e) => updateUser({ username: e.currentTarget.value })}
              value={user.username}
              type="text"
              label="Логин"
              placeholder="Логин"
              disabled={isEdit || isProfile}
            />
          </div>
          <div className={cls.field}>
            <Input
              onChange={(e) => updateUser({ password: e.currentTarget.value })}
              value={user.password}
              type="password"
              label="Пароль"
              placeholder="Пароль"
              disabled={isEdit || isProfile}
            />
          </div>
        </div>
        <div className={cls.row}>
          <div className={cls.field}>
            <Input
              onChange={(e) =>
                updateUser({ first_name: e.currentTarget.value })}
              value={user.first_name}
              type="text"
              label="Имя"
              placeholder="Имя"
              disabled={isProfile}
            />
          </div>
          <div className={cls.field}>
            <Input
              onChange={(e) => updateUser({ last_name: e.currentTarget.value })}
              value={user.last_name}
              type="text"
              label="Фамилия"
              placeholder="Фамилия"
              disabled={isProfile}
            />
          </div>
        </div>
        <div className={cls.row}>
          <div className={cls.field}>
            <Input
              onChange={(e) =>
                updateUser({ second_name: e.currentTarget.value })}
              value={user.second_name}
              type="text"
              label="Отчество"
              placeholder="Отчество"
              disabled={isProfile}
            />
          </div>
          <div className={cls.field}>
            <Input
              onChange={(e) => updateUser({ phone: e.currentTarget.value })}
              value={user.phone}
              type="text"
              label="Номер телефона"
              placeholder="Номер телефона"
              disabled={isProfile}
            />
          </div>
        </div>
        <div className={cls.field}>
          <Input
            onChange={(e) => updateUser({ position: e.currentTarget.value })}
            value={user.position}
            type="text"
            label="Должность"
            placeholder="Должность"
            disabled={isProfile}
          />
        </div>
        <div className={cls.row}>
          <RoleSelector
            user={user}
            updateUser={updateUser}
            disabled={isProfile}
          />
          <MainSpecSelector
            updateUser={updateUser}
            disabled={isProfile}
            user={user}
          />
        </div>

        <AdditionalSpecSelector
          user={user}
          updateUser={updateUser}
          disabled={isProfile}
        />
        <EmploymentFractionSelector
          user={user}
          updateUser={updateUser}
          disabled={isProfile}
        />
      </div>
      {!isProfile && (
        <div className={cls.save}>
          <Button type="submit" onClick={() => onSave()}>
            Сохранить
          </Button>
        </div>
      )}
    </div>
  );
};

export default CreateUserForm;
